import React, { useState } from "react";
import { Card, Button, Space, Tag, Typography, InputNumber, Input } from "antd";
import { useRequest } from "ahooks";
import { history } from "umi";

const { Text, Paragraph } = Typography;

// 模拟 API 请求
const searchUsers = (
  keyword: string
): Promise<{ keyword: string; results: string[]; timestamp: number }> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const results = [
        `${keyword}_用户1`,
        `${keyword}_用户2`,
        `${keyword}_用户3`,
      ];
      resolve({
        keyword,
        results,
        timestamp: Date.now(),
      });
    }, 500);
  });
};

const DebouncePage: React.FC = () => {
  const [keyword, setKeyword] = useState("");
  const [debounceWait, setDebounceWait] = useState(500);

  const { data, loading, error, run } = useRequest(searchUsers, {
    manual: true,
    debounceWait,
  });

  const handleSearch = (value: string) => {
    setKeyword(value);
    if (value.trim()) {
      run(value);
    }
  };

  return (
    <div style={{ padding: "24px" }}>
      <Button
        onClick={() => history.push("/")}
        style={{ marginBottom: "16px" }}
      >
        返回首页
      </Button>

      <Card
        title="useRequest 防抖 (debounceWait)"
        style={{ marginBottom: "16px" }}
      >
        <Paragraph>
          <Text strong>功能说明：</Text> 测试 debounceWait
          参数，设置防抖延迟时间，避免频繁请求。
        </Paragraph>

        <Space direction="vertical" style={{ width: "100%" }}>
          <div>
            <Text strong>状态：</Text>
            {loading && <Tag color="processing">搜索中...</Tag>}
            {error && <Tag color="error">错误: {error.message}</Tag>}
            {data && <Tag color="success">搜索完成</Tag>}
            <Tag color="blue">防抖延迟: {debounceWait}ms</Tag>
          </div>

          <Space>
            <Text>防抖延迟 (ms)：</Text>
            <InputNumber
              min={100}
              max={2000}
              step={100}
              value={debounceWait}
              onChange={(value) => setDebounceWait(value || 500)}
            />
          </Space>

          <Space>
            <Text>搜索关键词：</Text>
            <Input
              placeholder="请输入搜索关键词"
              value={keyword}
              onChange={(e) => handleSearch(e.target.value)}
              style={{ width: 200 }}
            />
          </Space>

          <Button
            type="primary"
            onClick={() => run(keyword)}
            loading={loading}
            disabled={!keyword.trim()}
          >
            手动搜索
          </Button>

          {data && (
            <div>
              <Text strong>搜索结果：</Text>
              <div style={{ marginTop: "8px" }}>
                <p>关键词: {data.keyword}</p>
                <p>时间戳: {data.timestamp}</p>
                <p>结果列表:</p>
                <ul>
                  {data.results.map((result, index) => (
                    <li key={index}>{result}</li>
                  ))}
                </ul>
              </div>
            </div>
          )}
        </Space>
      </Card>
    </div>
  );
};

export default DebouncePage;
